<clr-modal [(clrModalOpen)]="opened" [clrModalStaticBackdrop]="true" [clrModalClosable]="false">
    <h3 class="modal-title">{{'RESET_PWD.TITLE' | translate}}</h3>
    <div class="modal-body body-format password-body">
        <inline-alert></inline-alert>
        <label>{{'RESET_PWD.CAPTION' | translate}}</label>
        <form #forgotPasswordFrom="ngForm" clrForm>
            <clr-input-container>
                <label class="required">{{'RESET_PWD.EMAIL' | translate}}</label>
                <input clrInput [disabled]="isSuccess" name="reset_pwd_email" type="text" #eamilInput="ngModel" [(ngModel)]="email" required email
                    id="reset_pwd_email" size="50" (input)="handleValidation(true)" (blur)="handleValidation(false)">
                <clr-control-error *ngIf="!validationState">
                    {{'TOOLTIP.EMAIL' | translate}}
                </clr-control-error>
            </clr-input-container>
        </form>
    </div>
    <div class="modal-footer">
        <span class="spinner spinner-inline loading-top" [hidden]="showProgress === false"></span>
        <button type="button" class="btn" [class.btn-outline]="!isSuccess" [class.btn-primary]="isSuccess" (click)="close()">{{btnCancelCaption | translate}}</button>
        <button *ngIf="!isSuccess" type="button" id="submit-btn" class="btn btn-primary" [disabled]="!isValid || showProgress" (click)="send()">{{'BUTTON.SEND' | translate}}</button>
    </div>
</clr-modal>